<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            font-family: 'Segoe UI', 'Arial', sans-serif;
            background: linear-gradient(135deg, #0f0f1a, #1a1a2e);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            overflow: hidden;
        }

        /* 故障效果容器 */
        .glitch-container {
            position: relative;
            text-align: center;
            z-index: 10;
        }

        /* 404标题（故障效果） */
        .glitch-text {
            font-size: 8rem;
            font-weight: bold;
            position: relative;
            display: inline-block;
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            animation: glitch 3s infinite alternate;
        }

        .glitch-text::before,
        .glitch-text::after {
            content: "404";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch-text::before {
            left: -2px;
            text-shadow: -2px 0 #ff00c8;
            animation: glitch-before 2s infinite alternate;
        }

        .glitch-text::after {
            left: 2px;
            text-shadow: 2px 0 #00fff9;
            animation: glitch-after 2s infinite alternate;
        }

        /* 副标题 */
        .subtitle {
            font-size: 1.5rem;
            margin-top: 20px;
            opacity: 0.8;
        }

        /* 返回按钮（3D效果） */
        .home-btn {
            margin-top: 40px;
            padding: 12px 30px;
            background: linear-gradient(45deg, #00fff9, #ff00c8);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 255, 200, 0.3);
            position: relative;
            overflow: hidden;
        }

        .home-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 255, 200, 0.5);
        }

        .home-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .home-btn:hover::after {
            left: 100%;
        }

        /* 粒子动画背景 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: rgba(0, 255, 255, 0.3);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

        /* 故障动画 */
        @keyframes glitch {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(2px, -2px); }
            60% { transform: translate(-2px, -2px); }
            80% { transform: translate(2px, 2px); }
        }

        @keyframes glitch-before {
            0%, 100% { clip: rect(0, 200px, 2px, 0); }
            25% { clip: rect(0, 2px, 100px, 0); }
            50% { clip: rect(100px, 200px, 102px, 0); }
            75% { clip: rect(0, 200px, 100px, 198px); }
        }

        @keyframes glitch-after {
            0%, 100% { clip: rect(0, 200px, 100px, 0); }
            25% { clip: rect(0, 200px, 2px, 198px); }
            50% { clip: rect(100px, 2px, 102px, 0); }
            75% { clip: rect(0, 200px, 100px, 2px); }
        }

        /* 粒子浮动动画 */
        @keyframes float {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            10% { opacity: 0.3; }
            90% { opacity: 0.3; }
            100% {
                transform: translateY(-100vh) translateX(100px);
                opacity: 0;
            }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .glitch-text {
                font-size: 5rem;
            }
            .subtitle {
                font-size: 1.2rem;
                padding: 0 20px;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div class="particles" id="particles"></div>

    <!-- 故障效果内容 -->
    <div class="glitch-container">
        <div class="glitch-text">404</div>
        <div class="subtitle">🚀 页面可能被外星人劫持了...</div>
        <button class="home-btn" onclick="goHome()">返回首页</button>
    </div>

    <script>
        // 生成随机粒子
        const particlesContainer = document.getElementById('particles');
        for (let i = 0; i < 50; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + 'vw';
            particle.style.top = Math.random() * 100 + 'vh';
            particle.style.width = Math.random() * 3 + 'px';
            particle.style.height = particle.style.width;
            particle.style.background = `rgba(0, 255, ${Math.floor(Math.random() * 255)}, 0.3)`;
            particle.style.animationDuration = Math.random() * 20 + 10 + 's';
            particlesContainer.appendChild(particle);
        }

        // 返回首页（默认跳转到根目录 "/"，可自定义链接）
        function goHome() {
            window.location.href = "\/"; // 修改为你的首页路径，例如 "https://example.com"
        }
    </script>
</body>
</html>